<template>
  <el-container>
    <el-carousel :interval="5000" arrow="never" class="home-main-carousel">
      <el-carousel-item v-for="item in 4" :key="item">
      </el-carousel-item>
    </el-carousel>
    <div class="home-main-statistic">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="value2"
              :title="title"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="企业占比">
              <template slot="formatter">
                456/2
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              decimal-separator="."
              :value="value1"
              :title="title"
            >
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :value="like ? 521 : 520" title="Feedback">
              <template slot="suffix">
            <span @click="like = !like" class="like">
              <i
                class="el-icon-star-on"
                style="color:red"
                v-show="!!like"
              ></i>
              <i class="el-icon-star-off" v-show="!like"></i>
            </span>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "增长企业数",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      console.log(key, keyPath);
      if ("5" == key) {
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.home-main-carousel {
  position: absolute;
  padding: 0;
  width: 100%; /* 设置内部容器的宽度 */
  //height: 150px; /* 设置内部容器的高度 */
  background-color: #ccc; /* 设置背景色（仅用于展示）*/
}

.home-main-statistic {
  margin-top: 160px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  max-width: 1314px; /* 设置内部容器的宽度 */
  min-width: 1314px; /* 设置内部容器的宽度 */
  height: 150px; /* 设置内部容器的高度 */
  background-color: #00afff; /* 设置背景色（仅用于展示）*/
  z-index: 9999;
}

</style>
